<template>
  <div>
    <div>
      <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="goBack"></jxf-titletip>
      <el-form :model="salesmanInfo" class="mt20" :rules="rules" ref="salesmanInfo">
        <el-card class="jxf-table-card mt20">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <div class="listArea">
            <jxf-datalist :info="dataList">
              <template slot="telphone" slot-scope="scope">
                <el-form-item prop="telphone" required>
                  <el-input v-model.trim="salesmanInfo.telphone" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="password" slot-scope="scope">
                <el-form-item prop="password" required>
                  <el-input v-model.trim="salesmanInfo.password" type="password"></el-input>
                </el-form-item>
              </template>
              <template slot="userName" slot-scope="scope">
                <el-form-item prop="userName" required>
                  <el-input v-model.trim="salesmanInfo.userName" maxLength="20" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="contact" slot-scope="scope">
                <el-form-item prop="contact" required>
                  <el-input v-model.trim="salesmanInfo.contact" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="detailAdress" slot-scope="scope">
                <el-form-item prop="detailAdress" required>
                  <el-input v-model.trim="salesmanInfo.detailAdress" maxLength="30" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="address" slot-scope="scope">
                <AreaInput :searchInfo.sync="salesmanInfo"></AreaInput>
              </template>
            </jxf-datalist>
          </div>
        </el-card>
        <el-card class="jxf-table-card mt20">
          <div slot="header" class="clearfix">
            <span>补充信息</span>
          </div>
          <div class="listArea">
            <jxf-datalist :info="dataOtherList">
              <template slot="ownerName" slot-scope="scope">
                <el-form-item prop="ownerName" required>
                  <el-input v-model.trim="salesmanInfo.ownerName" maxLength="20" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="idCardNo" slot-scope="scope">
                <el-form-item prop="idCardNo" required>
                  <el-input v-model.trim="salesmanInfo.idCardNo" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="cardNo" slot-scope="scope">
                <el-form-item prop="cardNo" required>
                  <el-input v-model.trim="salesmanInfo.cardNo" clearable></el-input>
                </el-form-item>
              </template>
              <template slot="bankPhone" slot-scope="scope">
                <el-form-item prop="bankPhone" required>
                  <el-input v-model.trim="salesmanInfo.bankPhone" clearable></el-input>
                </el-form-item>
              </template>
            </jxf-datalist>
          </div>
        </el-card>
        <el-form-item class="text-center">
          <el-button type="primary" class="mt20" @click="addChannel" :loading="isSuccess">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5'
  export default {
    name: "AddSaleman",
    data() {
      return {
        title: "新增业务员",
        salesmanInfo: {
          bankPhone: "",
          cardNo: "",
          cityId: "",
          contact: "",
          detailAdress: "",
          idCardNo: "",
          ownerName: "",
          password: "",
          provinceId: "",
          telphone: "",
          userName: ""
        },
        isSuccess: false,
        rules: {
          telphone: [
            {required: true, message: '请输入手机号',trigger: ['blur', 'change']},
            {validator: validate.phone, trigger: 'blur'}
          ],
          contact: [
            {required: true, message: '请输入联系电话',trigger: ['blur', 'change']},
            {validator: validate.phone, trigger: 'blur'}
          ],
          detailAdress: [
            {required: true, message: '请输入联系地址',trigger: ['blur', 'change']},
          ],
          idCardNo: [
            {required: true, message: '请输入身份证号',trigger: ['blur', 'change']},
            {validator: validate.idCardNo, trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码',trigger: ['blur', 'change']},
            { min: 6, max: 12, message: '密码长度为6-12位', trigger: ['blur', 'change'] },
          ],
          userName: [
            {required: true, message: '请输入名称',trigger: ['blur', 'change']},
          ],
          ownerName: [
            {required: true, message: '请输入真实姓名',trigger: ['blur', 'change']},
          ],
          cardNo: [
            {required: true, message: '请输入银行卡号',trigger: ['blur', 'change']},
            {validator: validate.bankCard, trigger: 'blur'}
          ],
          bankPhone: [
            {required: true, message: '请输入预留手机号',trigger: ['blur', 'change']},
            {validator: validate.phone, trigger: 'blur'}
          ],
        },
        dataList: [
          {
            label: "*账号",
            type: 'telphone'
          },
          {
            label: "*密码",
            type: 'password'
          },
          {
            label: "*名称",
            type: 'userName'
          },
          {
            label: "*联系电话",
            type: 'contact'
          },
          {
            label: "*联系地址",
            type: 'detailAdress'
          },
          {
            label: "*地区",
            type: 'address'
          }
        ],
        dataOtherList: [
          {
            label: "*真实姓名",
            type: 'ownerName'
          },
          {
            label: "*身份证号",
            type: 'idCardNo'
          },
          {
            label: "*银行卡号",
            type: 'cardNo'
          },
          {
            label: "*预留手机号",
            type: 'bankPhone'
          }
        ]
      }
    },
    methods: {
      goBack() {
        // this.resetForm()
        this.$emit('goBack')
      },
      resetForm() {
        this.$refs['salesmanInfo'].resetField()
      },
      addChannel() {
        let data = {
          ...this.salesmanInfo,
          password: md5(this.salesmanInfo.password).toUpperCase(),
        }
        this.$refs['salesmanInfo'].validate((valid) => {
          if (valid) {
            this.isSuccess = true
            ajax.post(apis.architecture.addSaleman, data).then(res => {
              if(res.code === "10000000") {
                this.$message({
                  type: 'success',
                  message: '新增渠道商成功!'
                });
                this.$emit('fresh')
                this.$emit('goBack')
              } else {
                this.$message.error(res.message)
              }
              this.isSuccess = false
            });
          }})
      }
    }
  }
</script>

<style scoped>
  .el-input {
    width: 300px;
  }
  .el-form-item {
    margin-bottom: 16px;
  }
</style>
